<template>
    <view class="container">
        <view class="header">
            <view class="search-box">
                <uni-icons type="search" size="16" color="#999"></uni-icons>
                <input class="search-input" v-model="searchText" placeholder="搜索文章" @confirm="handleSearch" />
            </view>
            <button class="write-btn" @click="goToWrite">
                <uni-icons type="compose" size="16" color="#fff"></uni-icons>
                <text>写文章</text>
            </button>
        </view>
        <view class="article-list">
            <template v-if="articles && articles.length > 0">
                <view class="article-item" v-for="article in articles" :key="article.id" @click="goToDetail(article.id)">
                    <image class="article-image" :src="article.coverImage" mode="aspectFill"></image>
                    <view class="article-content">
                        <text class="article-title">{{ article.title }}</text>
                        <text class="article-desc">{{ article.description }}</text>
                        <view class="article-meta">
                            <view class="meta-left">
                                <text class="author">{{ article.author }}</text>
                                <text class="dot">·</text>
                                <text class="publish-time">{{ dateTimeFormat(article.createTime) }}</text>
                            </view>
                            <view class="meta-right">
                                <view class="meta-item">
                                    <uni-icons type="eye" size="14" color="#999"></uni-icons>
                                    <text>{{ article.views }}</text>
                                </view>
                                <view class="meta-item">
                                    <uni-icons :type="article.isLiked ? 'heart-filled' : 'heart'" size="14"
                                        :color="article.isLiked ? '#ff4444' : '#999'"></uni-icons>
                                    <text>{{ article.likes }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </template>
            <view v-else class="empty-state">
                <uni-icons type="info" size="64" color="#999"></uni-icons>
                <text>暂无文章</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/utils/request.js'
import { dateTimeFormat } from '@/utils/system'
import { onShow } from '@dcloudio/uni-app'

const articles = ref(null)

onShow(() => {
    loadArticleList();
})

const loadArticleList = async () => {
    try {
        uni.showLoading({
            title: '加载中...',
            mask: true
        })
        const res = await request.get("/article/list", {
            searchText: searchText.value
        })
        articles.value = res.data
        console.log(articles.value)
    } catch (e) {
        uni.showToast({
            title: e.message || '查询失败',
            icon: 'none'
        })
    } finally {
        uni.hideLoading()
    }
}

const goToDetail = (id) => {
    uni.navigateTo({
        url: `/pages/article/detail?id=${id}`
    })
}

const goToWrite = () => {
    uni.navigateTo({
        url: '/pages/article/edit'
    })
}

const searchText = ref('')

// 搜索文章
const handleSearch = () => {
    loadArticleList()
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20rpx;
}

.header {
    padding: 20rpx 0;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    gap: 20rpx;

    .search-box {
        flex: 1;
        height: 70rpx;
        background: #fff;
        border-radius: 35rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        gap: 10rpx;
        border: 1px solid #ddd;

        .search-input {
            flex: 1;
            height: 100%;
            font-size: 28rpx;
        }
    }

    .write-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10rpx;
        background: #36D1DC;
        color: #fff;
        border-radius: 35rpx;
        font-size: 28rpx;
        width: 160rpx;
        height: 70rpx;
        padding: 0;

        &:active {
            opacity: 0.8;
        }
    }
}

.article-list {
    .article-item {
        background: #ffffff;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
        overflow: hidden;
        border: 2rpx solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

        &:hover {
            border-color: #36D1DC;
            box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
            transition: all 0.3s ease;
        }

        border-bottom: none;
        padding-bottom: 0;

        .article-image {
            width: 100%;
            height: 300rpx;
        }

        .article-content {
            padding: 20rpx;

            .article-title {
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 10rpx;
                display: block;
            }

            .article-desc {
                font-size: 26rpx;
                color: #666;
                margin-bottom: 20rpx;
                display: block;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }

            .article-meta {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 24rpx;
                color: #999;

                .meta-left {
                    display: flex;
                    align-items: center;
                    gap: 10rpx;

                    .author {
                        font-size: 24rpx;
                        color: #333;
                        font-weight: bold;
                    }

                    .dot {
                        color: #999;
                    }

                    .publish-time {
                        color: #999;
                    }
                }

                .meta-right {
                    display: flex;
                    gap: 20rpx;

                    .meta-item {
                        display: flex;
                        align-items: center;
                        gap: 4rpx;
                    }
                }
            }
        }
    }

    .empty-state {
        padding: 100rpx 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20rpx;
        color: #999;
        font-size: 28rpx;
    }
}
</style>